<template>
	<div>
		<el-table v-loading="loading" @selection-change="selectionChange" :data="ArticleData" style="width: 100%;">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column label="文章标题">
				<template slot-scope="scope">
					<el-button @click="" type="text">{{scope.row.title}}</el-button>
				</template>
			</el-table-column>
			<el-table-column label="丛属类别">
				<template slot-scope="scope">
					{{scope.row.category}}
				</template>
			</el-table-column>
			<el-table-column label="作者">
				<template slot-scope="scope">
					{{scope.row.author}}
				</template>
			</el-table-column>
			<el-table-column label="发布日期">
				<template slot-scope="scope">
					{{scope.row.createTime}}
				</template>
			</el-table-column>
			<el-table-column lable="操作"  v-if="edit || del || recover">
				<el-button size="mini" v-if="edit" @click="">编辑</el-button>
				<el-button size="mini" v-if="recover" @click="">恢复为草稿</el-button>
				<el-button size="mini" v-if="del" type="danger" @click="">删除</el-button>
			</el-table-column>
		</el-table>
		<br>
		<div>
			<el-button v-if="del" :disabled="multiDelBtn" size="small" type="danger">批量删除</el-button>
		</div>
		<br>
		<el-pagination background layout="prev,pager,next" @current-change="currentChange" :page-size="10" :total="total"></el-pagination>
	</div>
</template>

<script>
	export default {
		name: "ArticleInfos",
		data: function() {
			return {
				loading: true,
				total: 0,
				multiDelBtn: true,
				ArticleData: []
			}
		},
		methods:{
			selectionChange(selection){
				this.multiDelBtn = selection.length == 0;
			},
			initArticleInfos(){ //查询文章信息
				this.$getRequest('/article/list')
				.then(resp => {
					if(resp){
						this.total = resp.data.total;
						this.ArticleData = resp.data.data;
						this.loading = false;
					}
				})
			},
			currentChange(pageNum){
				this.initArticleInfos();
			}
		},
		mounted() {
			this.initArticleInfos();
		},
		props:['edit','del','recover']
	}
</script>

<style>
</style>
